<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="90%"
			:before-close="dialogClick"
			@open="dialogOpen"
			
		>
			<!-- <div @click="print">导出</div> -->

			<div
				class="dialogBox"
				v-loading="loadings"
				element-loading-text="拼命导出中"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
				ref="content"
			>
			<v-OutPdf @exportPdf="print"></v-OutPdf>
				<div class="menu" style="margin-top:20px">
					<el-menu default-active="1" class="el-menu-vertical-demo">
						<div v-for="item in dialogData" :key="item.index">
							<a :href="'#' + item.index">
								<el-menu-item :index="item.index">
									<span slot="title">{{ item.title }}</span>
								</el-menu-item>
							</a>
						</div>
					</el-menu>
				</div>
				<div class="items" id="content" >
					
					<el-card
						id="1"
						class="box-card"
						v-loading="loading1"
						element-loading-text="暂无数据"
						element-loading-spinner="el-icon-warning"
						element-loading-background="rgba(0, 0, 0, 0.8)"
					>
						<div slot="header" class="clearfix">
							<span>数据库基本信息</span>
						</div>
						<div>
							<el-table
								:fit="true"
								:data="BaseData"
								style="width: 100%"
							>
								<el-table-column
									prop="id"
									label="id"
								></el-table-column>
								<el-table-column
									prop="ip"
									label="ip"
								></el-table-column>
								<el-table-column
									prop="hostName"
									label="hostName"
								>
								</el-table-column>
								<el-table-column
									prop="SGA_CURRENT_SIZE"
									label="SGA_CURRENT_SIZE"
								>
								</el-table-column>
								<el-table-column
									prop="DB_Version"
									label="DB_Version"
								></el-table-column>
								<el-table-column
									prop="DB_SERVERNAME"
									label="DB_SERVERNAME"
								></el-table-column>
								<el-table-column
									prop="DB_BLOCKSIZE"
									label="DB_BLOCKSIZE"
								>
								</el-table-column>
							</el-table>
						</div>
					</el-card>
					<el-card
						id="2"
						class="box-card"
						v-loading="loading2"
						element-loading-text="暂无数据"
						element-loading-spinner="el-icon-warning"
						element-loading-background="rgba(0, 0, 0, 0.8)"
					>
						<div slot="header" class="clearfix">
							<span>表空间使用统计</span>
						</div>
						<div>
							<el-table
								:fit="true"
								:data="TableSpace"
								style="width: 100%"
							>
								<el-table-column label="表空间名称">
									使用率
								</el-table-column>
								<el-table-column prop="MONITOR" label="MONITOR">
								</el-table-column>
								<el-table-column
									prop="OGG"
									label="OGG"
								></el-table-column>
								<el-table-column
									prop="OGGATE"
									label="OGGATE"
								></el-table-column>
								<el-table-column prop="SYSAUX" label="SYSAUX">
								</el-table-column>
								<el-table-column prop="SYSTEM" label="SYSTEM">
								</el-table-column>
								<el-table-column
									prop="UNDOTBS1"
									label="UNDOTBS1"
								>
								</el-table-column>
								<el-table-column
									prop="UNDOTBS2"
									label="UNDOTBS2"
								>
								</el-table-column>
								<el-table-column prop="USERS" label="USERS">
								</el-table-column>
							</el-table>
						</div>
					</el-card>
					<el-card
						id="3"
						class="box-card"
						v-loading="loading5"
						element-loading-text="暂无数据"
						element-loading-spinner="el-icon-warning"
						element-loading-background="rgba(0, 0, 0, 0.8)"
					>
						<div slot="header" class="clearfix">
							<span>数据库后台日志</span>
						</div>
						<div>
							<el-table :data="BaseLogData" border>
								<el-table-column
									prop="recordtime"
									label="日期"
									align="center"
									width="180"
								>
								</el-table-column>
								<el-table-column prop="result" label="内容">
								</el-table-column>
							</el-table>
						</div>
					</el-card>
					<el-card id="4" class="box-card">
						<div slot="header" class="clearfix">
							<span>数据库DBA权限用户</span>
						</div>
						<div>暂无数据</div>
					</el-card>
					<el-card id="5" class="box-card">
						<div slot="header" class="clearfix">
							<span>SQL语句执行与解析的比率</span>
						</div>
						<div>暂无数据</div>
					</el-card>
					<el-card id="6" class="box-card">
						<div slot="header" class="clearfix">
							<span>Parse CPU to Parse Elapsd</span>
						</div>
						<div>暂无数据</div>
					</el-card>
					<el-card id="7" class="box-card">
						<div slot="header" class="clearfix">
							<span>Non Parse CPU</span>
						</div>
						<div>暂无数据</div>
					</el-card>
					<el-card
						id="8"
						class="box-card"
						v-loading="loading4"
						element-loading-text="暂无数据"
						element-loading-spinner="el-icon-warning"
						element-loading-background="rgba(0, 0, 0, 0.8)"
					>
						<div slot="header" class="clearfix">
							<span>数据库总体运行性能（dbtime）</span>
						</div>

						<div id="dbtime"></div>
					</el-card>
					<el-card id="9" class="box-card">
						<div slot="header" class="clearfix">
							<span>回收站对象统计</span>
						</div>
						<div>
							暂无数据
						</div>
					</el-card>
					<el-card
						id="10"
						class="box-card"
						v-loading="loading3"
						element-loading-text="暂无数据"
						element-loading-spinner="el-icon-warning"
						element-loading-background="rgba(0, 0, 0, 0.8)"
					>
						<div slot="header" class="clearfix">
							<span>碎片检查</span>
						</div>
						<div>
							<el-table
								:fit="true"
								:data="TableSpacePie"
								style="width: 100%"
							>
								<el-table-column label="表空间名称">
									FSFI
								</el-table-column>
								<el-table-column prop="MONITOR" label="MONITOR">
								</el-table-column>
								<el-table-column
									prop="OGG"
									label="OGG"
								></el-table-column>
								<el-table-column
									prop="OGGATE"
									label="OGGATE"
								></el-table-column>
								<el-table-column prop="SYSAUX" label="SYSAUX">
								</el-table-column>
								<el-table-column prop="SYSTEM" label="SYSTEM">
								</el-table-column>
								<el-table-column
									prop="UNDOTBS1"
									label="UNDOTBS1"
								>
								</el-table-column>
								<el-table-column
									prop="UNDOTBS2"
									label="UNDOTBS2"
								>
								</el-table-column>
								<el-table-column prop="USERS" label="USERS">
								</el-table-column>
							</el-table>
						</div>
					</el-card>
				</div>

				<!-- html to pdf -->
				<!-- <v-OutPdf
					@htmlData="initPdfData"
					:htmlData="dialogData"
				></v-OutPdf> -->
			</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogClick">取 消</el-button> -->
				<el-button type="primary" @click="dialogClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import bus from 'common/bus.js';
// import vOutPdf from '@/components/common/outPdf/index';
import { htmlToBlob } from '@/api/index';
import {
	baseInfo,
	TableSpaceInfo,
	TableSpacePieInfo,
	BasePerInfo,
	BaseLog,
} from '@/api/index.js';
// import {htmlToBlob} from '@/api/index'

import { Line } from '@antv/g2plot';
import vOutPdf from '@/components/common/outPdf/outPdf.vue';

export default {
	props: {
		dialogVisible: Boolean,
		itemType: String,
		dialogData: null,
		title: String,
		info: null,
	},
	components: {
		vOutPdf,
	},
	mounted() {
		// console.log(dialogData);
	},
	data() {
		return {
			// dialogDatabaseItem: dialogDatabaseItem,
			// dialogServerItem: dialogServerItem,
			// dialogInternetItem: dialogInternetItem,
			pdfData: '',
			loadings: false,
			loading1: false,
			loading2: false,
			loading3: false,
			loading4: false,
			loading5: false,
			BaseData: [],
			TableSpace: [],
			TableSpacePie: [],
			line: '',
			BaseLogData: [],
		};
	},
	methods: {
		dialogClick() {
			this.$emit('haldDialogfalse');
			// 销毁数据
			(this.BaseData = []),
				(this.TableSpace = []),
				(this.TableSpacePie = []),
				this.line.destroy();
		},
		print() {
			this.$PDFSave(
				this.$refs['content'],
				`${this.info.ip}的数据库运行报告`
			);
		},
		// exportPdf(){
		// 	this.pdfData=''
		// },
		async getInfo() {
			(this.loading1 = true),
				(this.loading2 = true),
				(this.loading3 = true),
				(this.loading4 = true),
				(this.loading5 = true),
				//获取数据库基本信息
				baseInfo(this.info)
					.then((res) => {
						// console.log(res, '数据库基本信息');

						this.BaseData.push(res[0]);

						this.loading1 = false;
					})
					.catch((err) => {
						this.$message({
							message: '无数据',
							type: 'error',
						});
					});

			//表空间使用统计
			await TableSpaceInfo(this.info)
				.then((res) => {
					// console.log(res, '表空间使用统计');

					for (const key in res) {
						res[key] = `${res[key]}%`;
					}

					this.TableSpace.push(res);

					this.loading2 = false;
				})
				.catch((err) => {
					console.log(err);
				});

			//表空间碎片情况
			await TableSpacePieInfo(this.info)
				.then((res) => {
					for (const key in res) {
						res[key] = `${res[key]}%`;
					}

					this.loading3 = false;
				})
				.catch((err) => {
					console.log(err);
				});

			// 数据库总体运行性能（dbtime）
			await BasePerInfo(this.info)
				.then((data) => {
					this.loading4 = false;

					this.line = new Line('dbtime', {
						data,
						padding: 'auto',
						xField: 'recordtime',
						yField: 'detime',

						xAxis: {
							tickCount: 5,
						},
						slider: {
							start: 0.1,
							end: 0.5,
						},
					});

					this.line.render();
				})
				.catch((err) => {
					console.log(err);
				});

			// 数据库后台日志的接口
			await BaseLog(this.info)
				.then((res) => {
					this.BaseLogData.push(...res);

					this.loading5 = false;
				})
				.catch((err) => {
					console.log(err);
				});
		},
		dialogOpen() {
			this.getInfo();
		},

		//导出pdf的代码  废弃
		initPdfData(data) {
			this.loadings = true;
			// console.log(data, 'html');
			data = `<html><body>${data}</body></html>`;
			// console.log(data)
			htmlToBlob({ html: data })
				.then((res) => {
					// console.log(res);
					if (res.status === '200') {
						this.$message({
							showClose: true,
							message: '导出成功',
							type: 'success',
						});
					}

					const buf = Buffer.from(
						res.data._streams[1].data,
						'binary'
					);
					// 再输入到 Blob 生成文件
					const blob = new Blob([buf], { type: 'application/pdf' });
					const a = document.createElement('a');
					// 指定生成的文件名
					a.download = `${this.info}的${this.title}` + '.pdf';
					a.href = URL.createObjectURL(blob);
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);

					this.loadings = false;
				})
				.catch((err) => {
					console.log(err);
					this.$message({
						showClose: true,
						message: '导出失败',
						type: 'error',
					});
					this.loadings = false;
				});
		},
	},
};
</script>
<style>
.dialogBox {
	display: grid;
	grid-template-columns:auto;
	column-gap: 20px;
}
a {
	text-decoration: none;
	color: #909399;
}
.box-card {
	margin: 10px;
}
</style>
